<template>
  <div class="table-page">
    <a-form label-align="right" auto-label-width :model="listParams" size="small" class="form mt-10 mb-20">
      <a-form-item field="sourceChatroomIds" label="源头群">
        <a-checkbox-group v-model="commonParam.sourceChatroomIds" @change="getTopData">
          <a-checkbox
            class="mt-6"
            v-for="item in sourceList"
            :key="item.sourceChatRoomId"
            :value="item.sourceChatRoomId"
            >{{ item.name }}</a-checkbox
          >
        </a-checkbox-group>
      </a-form-item>
      <a-form-item field="sourceChatroomIds" label="统计日期" class="mt-20">
        <ms-date
          v-model:start="commonParam.startAt"
          :disabledDate="
            (current) =>
              dayjs(current).isAfter(dayjs().endOf('date')) ||
              dayjs(current).isBefore(dayjs('2023-09-07').startOf('date'))
          "
          v-model:end="commonParam.endAt"
          :showQuick="true"
          @dateChange="getTopData"
        ></ms-date>
      </a-form-item>
    </a-form>
    <GiTable
      row-key="id"
      ref="tt"
      id="groupOrderStatisticsDetail"
      v-model:columns="columns"
      :loading="loading"
      :data="tableData"
      :scroll="{ x: '100%', y: '100%', minWidth: 1000 }"
      :pagination="false"
      @refresh="getTopData"
    >
      <template #platform="{ record }">
        <template v-if="record.name">
          <span>{{ record.name }}</span>
        </template>
        <template v-else>
          <a-button type="text" size="small" @click="onMore(record.id, !record.isOpen)">
            {{ record.isOpen ? '收起' : '展开查看' }}
          </a-button>
        </template>
      </template>
    </GiTable>
  </div>
</template>

<script setup>
import dayjs from 'dayjs'
import { useSource } from '@/hooks/app'
import { sourceChatRoomOrderData } from '@/apis'
import { deleteEmpty } from '@/utils/common'

defineOptions({ name: 'groupOrderStatisticsDetail' })
const tableData = ref([])
const loading = ref(false)
const tt = ref()

// 公共参数
const commonParam = ref({
  startAt: dayjs().subtract(7, 'day').startOf('day').format('YYYY-MM-DD HH:mm:ss'),
  endAt: dayjs().subtract(1, 'day').endOf('day').format('YYYY-MM-DD HH:mm:ss'),
  sourceChatroomIds: undefined
})

const columns = ref([
  {
    title: '群名称',
    width: 200,
    render: ({ record }) => {
      return record.sourceChatName || '--'
    }
  },
  {
    title: '日期',
    width: 180,
    align: 'center',
    render: ({ record }) => {
      return record.date || '--'
    }
  },
  {
    title: '各平台数据',
    width: 180,
    align: 'center',
    slotName: 'platform'
  },
  {
    title: 'GMV',
    width: 130,
    align: 'center',
    dataIndex: 'totalGmv',
    render: ({ record }) => {
      return record.totalGmv === 0 ? 0 : record.totalGmv || '--'
    },
    sortable: {
      sortDirections: ['ascend', 'descend']
    }
  },
  {
    title: '有效GMV',
    width: 130,
    align: 'center',
    dataIndex: 'validGmv',
    render: ({ record }) => {
      return record.validGmv === 0 ? 0 : record.validGmv || '--'
    },
    sortable: {
      sortDirections: ['ascend', 'descend']
    }
  },
  {
    title: '订单量',
    width: 130,
    align: 'center',
    dataIndex: 'totalOrderCount',
    render: ({ record }) => {
      return record.totalOrderCount === 0 ? 0 : record.totalOrderCount || '--'
    },
    sortable: {
      sortDirections: ['ascend', 'descend']
    }
  },
  {
    title: '有效订单量',
    width: 130,
    align: 'center',
    dataIndex: 'validOrderCount',
    render: ({ record }) => {
      return record.validOrderCount === 0 ? 0 : record.validOrderCount || '--'
    },
    sortable: {
      sortDirections: ['ascend', 'descend']
    }
  },
  {
    title: '失效订单量',
    width: 130,
    align: 'center',
    dataIndex: 'invalidOrderCount',
    render: ({ record }) => {
      return record.invalidOrderCount === 0 ? 0 : record.invalidOrderCount || '--'
    },
    sortable: {
      sortDirections: ['ascend', 'descend']
    }
  },
  {
    title: '预估佣金',
    width: 130,
    align: 'center',
    dataIndex: 'totalCommission',
    render: ({ record }) => {
      return record.totalCommission === 0 ? 0 : record.totalCommission || '--'
    },
    sortable: {
      sortDirections: ['ascend', 'descend']
    }
  },
  {
    title: '商品数',
    width: 130,
    align: 'center',
    dataIndex: 'totalGoodsCount',
    render: ({ record }) => {
      return record.totalGoodsCount === 0 ? 0 : record.totalGoodsCount || '--'
    },
    sortable: {
      sortDirections: ['ascend', 'descend']
    }
  },
  {
    title: '源头群挂用户数',
    width: 160,
    align: 'center',
    dataIndex: 'userTotalCount',
    render: ({ record }) => {
      return record.userTotalCount === 0 ? 0 : record.userTotalCount || '--'
    },
    sortable: {
      sortDirections: ['ascend', 'descend']
    }
  },
  {
    title: '源头群挂群数量',
    width: 160,
    align: 'center',
    dataIndex: 'userWechatGroupTotalCount',
    render: ({ record }) => {
      return record.userWechatGroupTotalCount === 0 ? 0 : record.userWechatGroupTotalCount || '--'
    },
    sortable: {
      sortDirections: ['ascend', 'descend']
    }
  },
  {
    title: '源头群挂设备数',
    width: 160,
    align: 'center',
    dataIndex: 'userWechatTotalCount',
    render: ({ record }) => {
      return record.userWechatTotalCount === 0 ? 0 : record.userWechatTotalCount || '--'
    },
    sortable: {
      sortDirections: ['ascend', 'descend']
    }
  },
  {
    title: '微信消息数',
    width: 130,
    align: 'center',
    dataIndex: 'sourceChatroomMessageTotalCount',
    render: ({ record }) => {
      return record.sourceChatroomMessageTotalCount === 0 ? 0 : record.sourceChatroomMessageTotalCount || '--'
    },
    sortable: {
      sortDirections: ['ascend', 'descend']
    }
  },
  {
    title: '发送商品总数',
    width: 160,
    align: 'center',
    dataIndex: 'sourceChatroomGoodsTotalCount',
    render: ({ record }) => {
      return record.sourceChatroomGoodsTotalCount === 0 ? 0 : record.sourceChatroomGoodsTotalCount || '--'
    },
    sortable: {
      sortDirections: ['ascend', 'descend']
    }
  }
])

// 获取源头群
const { sourceList, getSourceList } = useSource()
getSourceList()

// 获取头部信息
const getTopData = async () => {
  try {
    loading.value = true
    const sourceChatroomIds = commonParam.value.sourceChatroomIds
    const param = {
      startAt: commonParam.value.startAt,
      endAt: commonParam.value.endAt,
      sourceChatroomIds: sourceChatroomIds ? sourceChatroomIds.join(',') : undefined
    }
    console.log(param)
    const res = await sourceChatRoomOrderData(deleteEmpty(param))
    tableData.value = res.data.sourceChatroomData.map((item, index) => {
      return {
        ...item,
        date: `${commonParam.value.startAt}\n${commonParam.value.endAt}`,
        id: index + 100,
        children: item.platforms,
        isOpen: false
      }
    })
  } finally {
    loading.value = false
  }
}
getTopData()

//点击展开更多
const onMore = (id, type) => {
  if (type) {
    tableData.value.forEach((item) => {
      item.isOpen = false
    })
    tt.value.tableRef.expandAll(false)
  }
  tt.value.tableRef.expand(id, type)
  const index = tableData.value.findIndex((item) => {
    return item.id === id
  })
  tableData.value[index].isOpen = type
}
</script>

<style lang="scss" scoped>
.table-page {
  height: 100%;
  overflow: hidden;
  margin: $margin;
  background: var(--color-bg-1);
  padding: $padding;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  .form {
    :deep(.arco-form-item) {
      margin-bottom: 10px;
    }
  }
  :deep(.arco-table-cell-inline-icon) {
    display: none;
  }
}
</style>
